<template>
  <div class="detail">
    <div class="detailLeft">
      <div class="imgContainer">
        <video
          width="320px"
          height="791px"
          autoplay="autoplay"
          loop="loop"
          controls="controls"
          :src="mvUrl"
        ></video>
        <div>
          <el-button
            @click="switchMvPre(0)"
            class="btn1 next"
            type="primary"
            :icon="ArrowLeftBold"
            circle
          ></el-button>
          <el-button
            @click="switchMvPre(1)"
            class="btn1 pre"
            type="primary"
            :icon="ArrowRightBold"
            circle
            :style="isShow ? 'right:0px' : ''"
          ></el-button>
        </div>
      </div>
    </div>
    <div class="detailRight" :style="isShow ? 'width:0' : ''">
      <ul
        v-infinite-scroll="load"
        class="infinite-list"
        style="overflow: auto"
        infinite-scroll-immediate="true"
      >
        <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
      </ul>
    </div>
    <el-button
      class="btn"
      type="primary"
      :icon="ArrowRightBold"
      circle
      @click="showRight"
      v-if="!isShow"
    ></el-button>
    <el-button
      class="btnLeft"
      type="primary"
      :icon="ArrowLeftBold"
      circle
      @click="showRight"
      v-else
    ></el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'

export default defineComponent({
  name: 'Detail',
})
</script>

<script lang="ts" setup>
import { ArrowRightBold, ArrowLeftBold } from '@element-plus/icons'
import { useRoute } from 'vue-router'
import PubSub from 'pubsub-js'
import { getMvPlayApi } from '@/api/home'
const route = useRoute()
// console.log(route.query);

// 接收路由参数id
const mvId = ref<number>(0)
// console.log((route.query.id)*1);
// mv播放地址
const mvUrl = ref('')

// 控制右侧评论区显示隐藏
const isShow = ref<boolean>(false)
const showRight = () => {
  isShow.value = !isShow.value
}

const count = ref(0)
const load = () => {
  // count.value += 2
}

// 切换视频，上一个
const switchMvPre = (num: number) => {
  // console.log(e.target);
  PubSub.publish('switchPlay', num)
}
// 切换视频，下一个
// const switchMvNext = (e:any) => {
//   // console.log(e.target);
//   // PubSub.publish('switchNext', e.target)
// }

// 获取mv播放地址
const getMvPlay = async () => {
  const res = await getMvPlayApi(mvId.value as number)
  // console.log(res);
  mvUrl.value = res.data.url
}
onMounted(async () => {
  const { id, type } = route.query
  // console.log('detail', id, type)

  mvId.value = id * 1
  // console.log(mvId.value);

  // 获取mv播放地址
  getMvPlay()

  PubSub.subscribe('mvId', (_msg: any, id: number) => {
    // console.log(msg,id);
    mvId.value = id
    getMvPlay()
  })
})

onUnmounted(() => {
  PubSub.clearAllSubscriptions()
})
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  .detailLeft {
    height: 731px;
    min-width: 800px;
    width: 100%;
    background-color: #f5f5f5;
    z-index: 99;
    .imgContainer {
      margin: 0 auto;
      // width: 550px;
      min-width: 200px;
      height: 100%;
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .detailRight {
    position: relative;
    width: 450px;
    background-color: #aaa;
    flex-shrink: 0;
  }
}

// 右侧样式
.infinite-list {
  height: 791px;
  padding: 0;
  margin: 0;
  list-style: none;
  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
    & + .list-item {
      margin-top: 10px;
    }
  }
}
// 右侧显示隐藏按钮
.btn {
  position: absolute;
  right: 425px;
  top: 50%;
}
.btnLeft {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 101;
}

// 切换视频按钮
.btn1 {
  z-index: 100;
  position: absolute;
  bottom: 0;
  bottom: 10px;
}
.pre {
  right: 460px;
  margin-right: 10px;
}
</style>
